<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .content{
            height: 100vh;
            width:  100vw;
            display: flex;
        }
        .left{
            flex: 1;
            display: flex;
            background-color: #fff;
            flex-direction: column;
            padding-left: 10px;
        }
        .right{
            flex: 1;
            display: flex;
            background-color: #333;
            flex-direction: column;
            padding-right: 10px;
        }
        .item{
            display: flex;
            width: 50vw;
            height: 35vh;
            flex-direction: column;
        }
        .item img {
            border-radius: 1rem;
            width: 100%;
            height: auto;
        } 
        .item .title {
            height: 40px;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
<script>
    const leftColumn  = document.querySelector(".left");
    const rightColumn  = document.querySelector(".right");
    const container = document.querySelector(".content")
    const data =[];
    let flag = 1;
    function init() {
        const blockCount = 20;
        const blocks = [];
        generateData(blockCount);
        data.forEach(item => {
            const block = createItem(item);
            blocks.push(block);
        });
        blocks.forEach(block => {
            appendBlock(block);
        });
        window.addEventListener('scroll', handlerScroll);
    }
    function generateData(num) {
        for (let i = 0; i < num; i++) {
            const width = getRandomNumber(300, 500);
            const height = getRandomNumber(200, 400);
            const color = getRandomColor();
            const title = '文本内容文本内容';
            data.push({ src: `https://via.placeholder.com/${width}x${height}/${color}`, title });
        }
    }
    function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    function createItem(dataItem) {
        const { src, title } = dataItem;
        const item = document.createElement('div');
        item.className = 'item';
        const img = document.createElement('img');
        img.src = src;
        item.appendChild(img);
        const titleElem = document.createElement('div');
        titleElem.className = 'title';
        titleElem.textContent = title;
        item.appendChild(titleElem);
        return item;
    }
    function appendBlock(item) {
        const leftHeight = getHeight(leftColumn);
        const rightHeight = getHeight(rightColumn);
        if (flag==1) {
            flag*=-1;
            leftColumn.appendChild(item);
        } else {
            flag *= -1;
            rightColumn.appendChild(item);
        }
    }
    function getHeight(column) {
        const blocks = column.querySelectorAll('.item');
        let height = 0;
        blocks.forEach(item => {
            height += item.offsetHeight;
        });
        return height;
    }
    function handlerScroll(){
        const windowHeight = window.innerHeight;
        const documentHeight = document.body.scrollHeight
        const scrollPosition = window.pageYOffset 
        if (documentHeight - scrollPosition - windowHeight < 100) {
            loadContent();
        }
    }
    function loadContent(){
        const blockCount = 20;
        const blocks = [];
        generateData(blockCount);
        data.forEach(item => {
            const block = createItem(item);
            blocks.push(block);
        });
        blocks.forEach(block => {
            appendBlock(block);
        });
    }
    init();
</script>
</html>